<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li {list-style:none; width:200px; height:400px; background:yellow; float:left;margin-right:10px;}
</style>
<script>
window.onload = function(){
  var aLi = document.getElementsByTagName('li');
  //第一步：找出全部li的个数
  for(var i=0;i<aLi.length;i++){
	//第二部：给每个li加开关
	aLi[i].onOff = true;
	//第三步：给每一个li都加点击事件
    aLi[i].onclick = function(){
	  if (this.onOff){
		this.style.background = 'red';  //千万不要用aLi[i] ！！！！！！因为点击时对应的只有一个li，所以并不能给每一个li都添加一个自定属性为false的onOff开关，所以这句只能是无效的
	    this.onOff = false;
	  }else{
		this.style.background = 'yellow';
		this.onOff = true;
	  }
    }
  }
}
</script>
</head>
<body>
<ul id="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>
